<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>购物车</title>
  <link rel="stylesheet" href="css/top.css">
  <link rel="stylesheet" href="css/footer.css">

  <style>
    .bg-top {

      padding-top: 18px;
      height: 74px;
      background-size: 100% 158%;
    }

    .cart-width {
      width: 1200px;
      margin: 0 auto;
      padding-top: 20px;
    }

    .cartList {
      width: 900px;
      /* height: 300px; */
      /* background-color: rgb(93, 189, 29); */
    }

    .relative-shouban {
      position: relative;
      left: 0;
      top: 74px;
    }

    .cartList>div {
      height: 40px;
      background-color: #efefef;
      line-height: 40px;
      padding-left: 10px;
    }

    .cartList>ul li {
      padding: 20px 30px 20px 10px;
      display: flex;
      justify-content: space-between;
      /* padding-right: 30px; */
      box-sizing: border-box;
      border-bottom: 1px solid #999;

    }

    .cartList>ul li p:nth-child(2) input {
      width: 70px;
      height: 20px;
      outline: none;
    }

    /* .cartList>ul li p:nth-child(1) {} */

    .cartList>ul li img {
      width: 70px;
      margin: 0 20px;
      vertical-align: middle;
    }

    /* .cartList>ul li p:nth-child(1) {
      display: flex;
      justify-content: space-between;
    } */

    .cartList>p {
      padding-top: 10px;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      padding-right: 80px;
      border-bottom: 1px solid #999;
    }

    .cartList>p span:nth-child(2) b {
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url(img/delete.jpg);
    }

    .cartList>ol {
      width: 900px;
      margin-top: 40px;

    }

    .cartList>ol li:first-child {
      height: 40px;
      background-color: #efefef;
      line-height: 40px;
      padding-left: 10px;
    }

    .cartList>ol dd {

      width: 15%;
      font-size: 12px;
    }

    .cartList>ol dd button {
      font-size: 12px;
      color: #ed302a;
      outline: none;
      background-color: #fff;
      border-color: #ed302a;
      padding: 3px;
    }

    .cartList ol dl {
      padding: 30px 0;
      display: flex;
      justify-content: space-evenly;
    }

    .cartList>ol dd img {
      width: 100%;
      height: 180px;
    }

    /* footer {
      position: relative;
      top: 290px;
      left: 0;
    } */

    .cart-width {

      position: relative;


    }

    .carts {

      position: fixed;
      top: 94px;
      right: 32px;
      z-index: 12;
      width: 280px;
      /* height: 300px; */
      background-color: #efefef;
      box-sizing: border-box;
      padding: 5px;
    }

    .carts ul {
      padding: 10px;
      background-color: #fff;
    }

    .carts ul li {
      margin-top: 10px;
    }

    .carts ul li:nth-child(1) {
      color: #ed3029;
    }

    .carts ul li:nth-child(2) {
      margin-top: 30px;
    }

    .carts ul li:nth-child(3) span {
      color: #ed3029;
    }

    .carts ul li:nth-child(4) input {
      width: 220px;
      height: 44px;
      font-size: 18px;
      color: white;
      background-color: #ed3029;
      border: none;

    }

    .carts ul li:nth-child(5) {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .carts ul li:nth-child(5) div:nth-child(2) {
      padding-left: 20px;
      border-left: 1px solid #999;
    }

    #lis .name {

      display: inline-block;
      width: 180px;
      vertical-align: middle;
    }

    .toIndex {
      box-sizing: border-box;
      padding: 10px;
      border-bottom: #999 1px solid;
    }

    .toIndex a {
      color: black;
    }

    .toIndex a:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="top">
    <div class="bg-top">
      <ul class="top-left">
        <li></li>
        <li>
          <a href="#">北京地区暂停发货说明，点击查看详情></a>
        </li>
      </ul>
      <ul class="top-right">
        <li class="log-btn"><a href="#">亚索！</a></li>
        <li><a href="#"><span></span> 购物车 <span class="Product-num">0</span></a></li>
        <li><a href="#"> <span></span>领取中心</a></li>
        <li><a href="#"> <span></span>微信商城</a></li>
      </ul>
    </div>
  </div>
  <div class="spr-service">
    <p></p>
    <p>联系客服</p>
  </div>

  <div class="relative-shouban">
    <p class="toIndex"><a href="index.html">商城首页></a></p>
    <div class="carts">
      <h3><span></span> 我的购物车</h3>
      <ul>
        <li>满299包邮</li>
        <li>商品数量: <span class="cartnum">0</span></li>
        <li>商品金额：<span>￥<b class="jiage">0</b></span></li>
        <li><input type="button" name="" id="" value="去结算" onclick="billPlease()"></li>
        <li>
          <div>承诺</div>
          <div>
            <p>7天无理由退换货</p>
            <p>100%官方正品</p>
            <p>全场每单满299元包邮</p>
          </div>
        </li>
      </ul>
      <!-- <p>￥<b>0.00</b></p> -->
    </div>
    <div class="cart-width">
      <div class="cartList">
        <div style="display: flex;justify-content: space-between; padding-right: 50px;">
          <p>
            <input type="checkbox" oninput="iptChang(this)" class="allChange">全选
            <span>商品数量</span>
          </p>
          <p style="width: 500px;display: flex;justify-content: space-between;">
            <span>单价（元）</span>
            <span>数量</span>
            <span>小计</span>
            <span>操作</span>
          </p>
        </div>
        <ul id="lis">
          <!-- <li>
            <p>
              <input type="checkbox" name="" id="">
              <img src="img/哥哥.webp" alt="">
              <span class="name">名字</span>
            </p>
            <p style="width: 530px;display: flex;justify-content: space-between; padding-top: 22px;">
              <span>￥<b>6300.00</b> 元</span>
              <input type="number" min="1" value="1">
              <span>小计 <b>6300</b></span>
              <span>
                <a href="#"> 删除</a>
                <a href="#">收藏</a>
              </span>
            </p>
          </li> -->

        </ul>
        <p>
          <span>
            <input type="checkbox" name="" id="">全选 <span style="color: red;">继续购物</span>
          </span>
          <span><a href="#"><b></b> 清空购物车</a></span>
        </p>
        <ol>
          <li>精品推荐</li>
          <li>
            <dl>
              <dd>
                <img src="img/哥哥.webp" alt="">
                <p>哥哥</p>
                <p>￥<b>6300</b></p>
                <button>加入购物车</button>
              </dd>
              <dd>
                <img src="img/哥哥.webp" alt="">
                <p>哥哥</p>
                <p>￥<b>6300</b></p>
                <button>加入购物车</button>
              </dd>

            </dl>
          </li>
        </ol>

      </div>



    </div>

    <!-- footer -->
    <footer>
      <div class="footer-top">
        <p><a href=""><span>7</span> 7天无理由退换货</a></p>
        <p><a href=""><span>正</span>100%官方正品</a></p>
        <p><a href=""><span>免</span>全场每单满299元包邮</a></p>

      </div>

      <div class="footer-main">
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
      </div>

      <div class="footer-ab">
        <ul>
          <li> 关于商城 </li>
          <li> 服务条款 </li>
          <li> 合作伙伴 </li>
          <li> 法律声明 </li>
          <li> 经营者证照信息 </li>
        </ul>
      </div>

      <div class="footer-text">
        <ul>
          <li>
            <span></span>
            <span></span>
          </li>
          <li>
            北京京东世纪贸易有限公司提供客服支持 | 售后服务： https://wj.qq.com/s2/9280963/12ea
            Copyright (C) 1998 – 2018 Tencent. All Rights Reserved.腾讯公司 版权所有
          </li>
          <li>
            <img src="img/工商.png" alt="">
          </li>
        </ul>
      </div>
    </footer>

  </div>

  <script src="js/axios.js"></script>
  <script>

    // 向上移动
    let moveUp = document.querySelector('.top-left a');
    console.log(moveUp.offsetTop);
    // let Y = moveUp.offsetTop;
    let spend = 2;
    let Y = moveUp.offsetTop;

    moveUp.timer = setInterval(() => {


      moveUp.style.top = moveUp.offsetTop - spend + "px";
      if (moveUp.offsetTop <= -30) {
        // clearInterval(moveUp.timer)
        moveUp.style.top = "4px";
      }

    }, 100);



    //查看购物车中的商品
    // 查询用户购物车中的商品 接口

    // 接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
    // 接口请求方式：get
    // 接口参数：
    //      id  用户id

    CartLists();
    function CartLists() {
      let url = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
      let uid = localStorage.getItem("uid");
      console.log(uid);

      axios.get(url, {
        params: {
          id: uid
        },
      }).then((res) => {
        console.log(res.data.data);
        let num = 0;
        res.data.data.forEach(v => {
          num = num * 1 + v.pnum * 1;
        });
        console.log(num);

        document.querySelector('.Product-num').innerHTML = num;
        let str = ''
        let price;
        res.data.data.forEach(v => {
          price = v.pnum * v.pprice;

          str += `
          <li>
            <p>
              <input type="checkbox" name="" id="" class="cartIpt" oninput="radioIpt(this)">
              <img src="${v.pimg}" alt="">
              <span class="name">${v.pname}</span>
            </p>
            <p style="width: 530px;display: flex;justify-content: space-between; padding-top: 22px;">
              <span>￥<b>${v.pprice}</b> 元</span>
              <input type="number" min="1" value="${v.pnum}" onclick="updateNum(${v.pid},this)" class="cart-nums">
              <span class="xiaoji">小计 <b id="subtotal" class="zprice" >${price}</b></span>
              <span>
                <a href="javascript:deleteCart(${v.pid},this)"> 删除</a>
                <a href="#">收藏</a>
              </span>
            </p>
          </li>
          
          `
        })
        document.querySelector('#lis').innerHTML = str;
      })
    }



    // 精品推荐
    //     商品列表接口


    // 所有商品接口
    // get
    // 参数
    // pagesize  每页获取几个数据
    // pagenum 获取第几页数据
    // uid  用户id
    // http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4

    let listURL = 'http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=6&pagenum=0';

    axios.get(listURL, {
      params: {
        uid: 96839
      },
    }).then(function (res) {
      console.log(res.data.data);
      let listArr = res.data.data.map(v =>
        `
      <dd>
                <img src="${v.pimg}" alt="">
                <p style="width:100%;overflow:hidden;white-space: nowrap;">${v.pname}</p>
                <p>￥<b>${v.pprice}</b></p>
                <button onclick="addCart(${v.pid})">加入购物车</button>
      </dd>
      
      `

      )
      document.querySelector('.cartList ol dl').innerHTML = listArr.join('');
    })


    //删除
    // 接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
    // 接口请求方式：get
    // 接口参数：
    //      uid  用户id
    //      pid  商品id
    function deleteCart(pid, v) {
      console.log(v);
      // console.log(pid);
      let delURL = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
      let uid = localStorage.getItem("uid");

      axios.get(delURL, {
        params: {
          uid,
          pid
        },
      }).then(function (res) {
        console.log(res.data);
        // 渲染
        CartLists();
      })

    }

    //全选
    function iptChang(res) {
      console.log(res.checked);
      let cartRidios = document.querySelectorAll('.cartIpt');
      console.log(cartRidios);
      let all = document.querySelector('.allChange');
      let zpricese = document.querySelectorAll('.zprice');
      let numText = document.querySelector('.jiage');
      let Pri = 0;

      let nums = document.querySelectorAll('.cart-nums');//数量
      let num = 0;

      let cartnum = document.querySelector('.cartnum');//展示

      if (res.checked) {
        nums.forEach(function (v) {
          num = num + v.value * 1;
          cartnum.innerHTML = num;
        })
        zpricese.forEach(function (v) {
          Pri = Pri + v.innerHTML * 1;
          numText.innerHTML = Pri;


        })
        cartRidios.forEach(function (v) {
          v.checked = true;
          v.onchange = function () {
            if (!this.checked) {
              all.checked = false
            }
          }

        })
      } else {
        numText.innerHTML = Pri;
        cartnum.innerHTML = num;
        cartRidios.forEach(function (v) {
          v.checked = false;

        })

      }


    }



    //
    function radioIpt(v) {
      console.log(v.checked);
      //各个商品得数量
      let nums = document.querySelectorAll('.cart-nums');
      console.log(nums);
      //数量
      let num = 0;

      let cartnum = document.querySelector('.cartnum');//展示
      //
      let allChange = document.querySelector('.allChange');

      let cartRidios = document.querySelectorAll('.cartIpt');
      let zpricese = document.querySelectorAll('.zprice');
      let numText = document.querySelector('.jiage');
      let P = 0;
      cartRidios.forEach(function (v, i) {
        if (v.checked) {
          num = num + nums[i].value * 1;
          P = P + zpricese[i].innerHTML * 1;
          numText.innerHTML = P;
          cartnum.innerHTML = num;
        } else {
          numText.innerHTML = P;
          cartnum.innerHTML = num;
        }
      })

    }



    // 更新购物车中商品数量 接口

    // 接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
    // 接口请求方式：get
    // 接口参数：
    //      uid  用户id
    //      pid  商品id
    //      pnum  要添加的商品数量

    // 使用方式
    function updateNum(pid, res) {
      // console.log(pid);
      // console.log(res.value);
      let uid = localStorage.getItem("uid");
      let pnum = res.value;
      let numURL = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php';

      axios.get(numURL, {
        params: {
          uid,
          pid,
          pnum
        },
      }).then(function (res) {
        console.log(res);
        let url = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
        let uid = localStorage.getItem("uid");
        console.log(uid);

        axios.get(url, {
          params: {
            id: uid
          },
        }).then((res) => {
          console.log(res.data.data);
          let num = 0;
          res.data.data.forEach(v => {
            num = num * 1 + v.pnum * 1;
          });
          console.log(num);

          document.querySelector('.Product-num').innerHTML = num;
          let str = ''
          let price;
          let xj = document.querySelectorAll('.xiaoji');
          let cartRidios = document.querySelectorAll('.cartIpt');
          let numText = document.querySelector('.jiage');
          console.log(xj);
          let zongjia = 0;
          let cartnum = document.querySelector('.cartnum');//数量
          let pcnum = 0;

          res.data.data.forEach((v, i) => {
            price = v.pnum * v.pprice;


            xj[i].innerHTML = `小计 <b id="subtotal" class="zprice" >${price}</b>`
            if (cartRidios[i].checked) {
              zongjia = zongjia + price;

              numText.innerHTML = zongjia;

              pcnum = pcnum + v.pnum * 1;
              cartnum.innerHTML = pcnum;
            }

          })


        })


      })
    }


    //结账
    function billPlease() {
      let cartNum = document.querySelector('.cartnum');


      let jiage = document.querySelector('.jiage');

      let price = jiage.innerHTML;
      if (cartNum.innerHTML == 0) {
        alert('您还没选择商品');
      } else {
        alert('您一共选择了' + cartNum.innerHTML + "件商品" + '\n' + '共需要支付' + price + '元');
      }
    }


    //加入购物车
    // 接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
    // 接口请求方式：get
    // 接口参数：
    //       uid  用户id
    //       pid  商品id
    //       pnum  要添加的商品数量
    function addCart(pid) {

      console.log(pid);

      let uid = localStorage.getItem("uid");

      let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";

      axios.get(url, {
        params: {
          uid,
          pid,
          pnum: 1
        },
      }).then(function (res) {
        console.log(res.data);
        CartLists();
      })

    }
  </script>
</body>

</html>